<template>
    <v-scale-screen  width="1920" height="1080" :boxStyle="{ backgroundColor: '#011633' }" fullScreen> 
    <div class="dataScreen-container">
        <div class="screen-header absolute-header">
            <Header />
        </div>
        <div class="screen">
          <div class="screen-main">
            <div class="screen-left">
              <Left />
            </div>
            <div class="screen-center">
              <Center ref="centerRef" />
            </div>
            <div class="screen-right">
              <Right />
            </div>         
          </div>
        </div>
        <div class="screen-footer"></div>
    </div>
    </v-scale-screen>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    name: 'DataScreen',
  })
  </script>
  
  <script setup  lang="ts">
  import { ref, provide } from 'vue'
  import Header from './Header/index.vue'
  import Left from './Left/index.vue'
  import Center from './Center/index.vue'
  import Right from './Right/index.vue'
  import VScaleScreen from 'v-scale-screen'
  // 创建对Center组件的引用
  const centerRef = ref(null)
  
  // 提供centerRef给子组件使用
  provide('centerRef', centerRef)
  </script>
  
  <style  lang="scss" scoped>
  .dataScreen-container{
    --es-screen-width: 1920px;
    --es-screen-height: 1080px;
    --es-header-height: 102px;
    pointer-events: auto;
    position: relative;
    // background: #010826;
    .absolute-header {
      position: fixed;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 9999 !important;
      pointer-events: auto;
    }
    .screen{
    width: var(--es-screen-width);
    position: relative;
    padding-top: var(--es-header-height);
     &-main{
        width: var(--es-screen-width);
        position: relative;
        height: var( --es-screen-height);
      }
      &-center{
        width: 100%;
        height: var( --es-screen-height);
        position: absolute;
        z-index: 900;
      }
      &-left {
		  width: 473px;
      height: var( --es-screen-height);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 10%;
      z-index: 901;
      // background: linear-gradient(to  right, rgba(14, 38, 62, 1), rgba(14, 38, 62, 0.5)); 
	   }
      &-right {
		  width: 473px;
      height: var( --es-screen-height);
      position: absolute;
      // background: linear-gradient(to left, rgba(14, 38, 62, 1), rgba(14, 38, 62, 0.5)); 
      top: 0;
      right: 0;
      z-index: 901;
      
	   }
    }
    .screen-footer{
        width: 50%;
        height: 49px;
        background-image: url("@/assets/imgs/dataScreen/footer-bg.png");
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
  }
  </style>